<template>
  <div v-if="visible" class="modal-overlay">
    <div class="modal-content modal-main">
      <div class="modal-header">
        <h3 class="text-lg font-bold import-title">文件导入</h3>
        <button class="close-btn" @click="handleCancel">
          &times;
        </button>
      </div>
      <div class="modal-body">
        <!-- 插件选择部分 -->
        <div class="mb-6">
          <div class="form-control w-full">
            <label class="label">
              <span class="label-text font-medium">请选择插件</span>
            </label>
            <select
              v-model="selectedPlugin"
              class="select select-bordered w-full"
              placeholder="请选择插件"
              @change="handlePluginChange"
            >
              <option value="" disabled selected>请选择插件</option>
              <option
                v-for="plugin in plugins"
                :key="plugin.id"
                :value="plugin"
              >
                {{ plugin.name }}
              </option>
            </select>
          </div>
        </div>

        <!-- 插件信息和参数配置部分（仅在选择插件后显示） -->
        <div v-if="selectedPlugin.id" class="mb-6 space-y-4">

          <!-- 动态参数表单 -->
          <div v-if="formFields.length > 0" class="space-y-4">
            <h4 class="font-bold">参数配置</h4>
            <div v-for="(field, index) in formFields" :key="index" class="mb-5">
              <component
                :is="getComponent(field.type)"
                v-if="getComponent(field.type)"
                v-model="formData[field.name]"
                :label="field.label"
                :path="path"
                :placeholder="field.placeholder"
                :options="field.options"
                :error="field.error"
                :disabled="field.disabled"
                :min="field.min"
                :max="field.max"
                :step="field.step"
                :isInteger="field.isInteger"
                :required="field.required"
                :maxLength="field.maxLength"
                :rows="field.rows"
                :accept="field.accept || ''"
                :ref="(el: DynamicComponent | null) => { if (el) componentRefs[index] = el }"
              />
            </div>
          </div>

          <!-- 无参数时的提示 -->
          <div v-else-if="selectedPlugin.id && !formFieldsLoading" class="alert alert-info">
            该插件没有需要配置的参数
          </div>
          <!-- 插件基本信息显示 -->
          <div class="bg-base-200 p-4 rounded-lg">
            <h4 class="font-bold-t1 mb-3">插件信息</h4>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div class="form-control">
                <div class="flex items-center gap-[10px]">
                  <label class="label flex-none">
                    <span class="label-text-t1">选择插件：</span>
                  </label>
                  <input type="text" :value="selectedPlugin.name" disabled class="input input-bordered text-center flex-1" />
                </div>
              </div>
              <div class="form-control">
                <div class="flex items-center gap-[10px]">
                  <label class="label flex-none">
                    <span class="label-text-t1">版本号：</span>
                  </label>
                  <input type="text" :value="selectedPlugin.version" disabled class="input input-bordered text-center flex-1" />
                </div>
              </div>
            </div>
          </div>
          <!-- 加载中提示 -->
          <div v-if="formFieldsLoading" class="flex justify-center items-center py-4">
            <div class="loading loading-spinner loading-md"></div>
            <span class="ml-2">加载参数配置中...</span>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button class="tech-btn-warn import-btn-cancel " @click="handleCancel">取消</button>
        <button
          class="tech-btn import-btn-primary"
          :disabled="!isFormValid"
          @click="handleSubmit"
        >
          导入
        </button>
      </div>
    </div>
  </div>
  <!-- 全局loading遮罩层 -->
  <div v-if="isLoading" class="loading-overlay">
    <div class="spinner"></div>
  </div>
  <!-- 消息提示组件 -->
  <Message ref="messageRef" />
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import fileImportApi from "@/views/fileImport/fileImport.api.ts";
import TextInput from '../../components/BaseComponents/TextInput.vue';
import NumberInput from '../../components/BaseComponents/NumberInput.vue';
import Select from '../../components/BaseComponents/Select.vue';
import FilesUpload from '../../components/BaseComponents/FilesUpload.vue';
import FileUpload from '../../components/BaseComponents/FileUpload.vue';
import TextArea from '../../components/BaseComponents/TextArea.vue';
import Checkbox from '../../components/BaseComponents/Checkbox.vue';
import Message from '../../components/BaseComponents/Message.vue';
import {useTimestampStore} from "@/stores/timestampStore.ts";
interface Plugin {
  id: string;
  label: string;
  name: string;
  type: string;
  version: string;
  executeCommand: string;
  executeFile: string;
  executeConfig: string;
  path: string;
  config: string;
  outputPath: null;
  params?: Array<any>;
  [key: string]: any;  // 支持任意其他属性
}
interface FormField {
  name: string;
  type: string;
  label: string;
  placeholder?: string;
  options?: Array<{
    label: string;
    value: string | number;
  }>;
  required?: boolean;
  error?: string;
  disabled?: boolean;
  min?: number;
  max?: number;
  step?: number;
  isInteger?: boolean;
  maxLength?: number;
  rows?: number;
  mode?: string;
  option?: string;
  value?: any;
  accept?: string;
}
interface UploadedFile {
  name: string
  raw: File
}
interface DynamicComponent {
  [key: string]: any; // 允许任何方法
}
const props = defineProps<{
  visible: boolean;
}>();

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void;
  (e: 'confirm', data: any): void;
  (e: 'cancel'): void;
  (e: 'success'): void;
}>();
const path = ref('');
// 插件列表
const plugins = ref<Plugin[]>([]);
// 选中的插件
const selectedPlugin = ref<Plugin>({} as Plugin);
// 表单字段
const formFields = ref<FormField[]>([]);
// 表单数据
const formData = ref<Record<string, any>>({});
// 执行参数
const executionParams = ref({
  executeCommand: ''
});
// loding 控制
const isLoading = ref(false)
// 表单字段加载状态
const formFieldsLoading = ref(false);

// 新增动态组件的引用数组
const componentRefs = ref<(DynamicComponent | null)[]>([]);
// 消息提示组件引用
const messageRef = ref<InstanceType<typeof Message> | null>(null);
// 获取模式
const mode = localStorage.getItem("mode")
// 表单验证
const isFormValid = computed(() => {
  if (!selectedPlugin.value?.id) return false;

  // 检查所有必填字段是否已填写
  const requiredFields = formFields.value.filter(field => field.required);
  return requiredFields.every(field => {
    const value = formData.value[field.name];
    if (Array.isArray(value)) {
      return value.length > 0;
    }
    return !!value;
  });
});

// 获取组件类型
const getComponent = (type: string) => {
  const componentMap: Record<string, any> = {
    'text': TextInput,
    'number': NumberInput,
    'select': Select,
    'files': FilesUpload,
    'file': FileUpload,
    'textarea': TextArea,
    'checkbox': Checkbox
  };
  return componentMap[type] || null;
};

// 获取插件列表
const getApiMethod = (params) =>{
  if(mode == "tinker"){
    return fileImportApi.tinkerGetPlugins(params)
  }else {
    return fileImportApi.getPlugins(params)
  }
}
function getPlugins() {
  let params = {type: 0}
  getApiMethod(params).then((res: any) => {
    if (res && res.code === 200) {
      // 直接使用API返回的完整数据
      plugins.value = Array.isArray(res.data) ? res.data : [];
      findTargetPlugin()
    } else {
      console.log("获取插件失败")
    }
  }).catch((error: any) => {
    console.error('获取插件失败:', error);
    messageRef.value?.show({
      type: 'warning',
      content: error.response.data.msg,
      duration: 3000
    });
  });
}

// 处理插件选择变更
function handlePluginChange() {
  if (selectedPlugin.value?.id) {
    // 重置表单数据
    formData.value = {};
    executionParams.value.executeCommand = selectedPlugin.value.executeCommand || '';
    // 加载插件参数
    loadPluginParams(selectedPlugin.value);
  } else {
    formFields.value = [];
    formData.value = {};
  }
}

// 加载插件参数
async function loadPluginParams(plugin: Plugin) {
  formFieldsLoading.value = true;
  try {

    // 如果插件已包含params，直接使用
    if (plugin.params && Array.isArray(plugin.params)) {
      path.value = plugin.path;
      processPluginParams(plugin.params);
    }
  } catch (error) {
    console.error('加载插件参数失败:', error);
  } finally {
    formFieldsLoading.value = false;
  }
}

// 处理插件参数
function processPluginParams(params: any[]) {
  // 处理参数，确保所有必要的字段都存在
  const processedParams = params.map(param => {
    // 处理options字段
    let options = [];
    if (Array.isArray(param.option)) {
      // 如果是数组，遍历处理每个选项
      options = param.option.map((opt: string | { label: string; value: string | number }) => {
        if (typeof opt === 'string') {
          try {
            return JSON.parse(opt);
          } catch (e) {
            console.error('Failed to parse option:', e);
            return null;
          }
        }
        return opt;
      }).filter((opt: { label: string; value: string | number } | null) => opt !== null);
    } else if (typeof param.option === 'string') {
      // 如果是字符串，尝试解析为JSON
      try {
        options = JSON.parse(param.option);
      } catch (e) {
        console.error('Failed to parse options:', e);
        options = [];
      }
    }
    return {
      ...param,
      label: param.label || param.name.charAt(0).toUpperCase() + param.name.slice(1),
      options: options || []
    };
  });

  formFields.value = processedParams;
  // 重置组件引用数组
  componentRefs.value = new Array(processedParams.length).fill(null);
  // 初始化表单数据
  const initialData: Record<string, any> = {};
  processedParams.forEach((field) => {
    // 根据字段类型设置默认值
    if (field.type === 'checkbox') {
      initialData[field.name] = [];
    } else if (field.type === 'file') {
      initialData[field.name] = [];
    } else if (field.type === 'number') {
      const defaultValue = (field as any).value ? Number((field as any).value) : 0;
      initialData[field.name] = defaultValue;
    } else {
      initialData[field.name] = (field as any).value || '';
    }
  });
  formData.value = initialData;
}

// 添加文件类型校验函数
const validateFileTypes = (fileNames: string): Promise<boolean> => {
  return new Promise((resolve) => {
    // 获取所有文件类型的参数
    const fileParams = formFields.value.filter(field => field.type === 'files' || field.type === 'file');

    if (fileParams.length > 1) {
      // 获取所有已上传的文件
      const uploadedFiles = fileParams.map(param => {
        const ref = componentRefs.value[formFields.value.indexOf(param)];
        return {
          type: param.type,
          files: ref?.fileNames?.slice(0, -1) || []
        };
      });

      // 检查是否有文件上传
      const hasFiles = uploadedFiles.some(item => item.files.length > 0);
      if (!hasFiles) {
        resolve(true);
        return;
      }
      // 解析fileNames字符串，获取所有文件类型
      const fileTypes = new Set<string>();
      if (fileNames) {
        const files = fileNames.split(',').filter(Boolean);
        files.forEach(file => {
          const extension = file.split('.').pop()?.toLowerCase();
          if (extension) fileTypes.add(extension);
        });
      }

      const dataTypeFieldObj = formFields.value.find(field => field.name === 'dataType');
      const dataTypeField = dataTypeFieldObj ? dataTypeFieldObj.value.replace('.', '') : '';

      // 如果存在多种文件类型
      if (dataTypeField && (!fileTypes.has(dataTypeField) || fileTypes.size > 1)) {
        // messageRef.value?.show({
        //   type: 'warning',
        //   content: '数据类型与文件类型不匹配',
        //   duration: 5000
        // });
        // 显示确认弹窗
        if (window.confirm('检测到文件类型与选择的数据类型不匹配，是否继续上传？')) {
          resolve(true);
        } else {
          resolve(false);
        }
        return;
      }
    }
    resolve(true);
  });
};

// 修改提交表单函数
const handleSubmit = async () => {
  // 检查所有文件是否都已上传完成
  const fileUploadComponents = componentRefs.value.filter(ref => ref && (ref.areAllFilesUploaded !== undefined));
  const allFilesUploaded = fileUploadComponents.every(ref => ref?.areAllFilesUploaded());

  if (!allFilesUploaded) {
    messageRef.value?.show({
      type: 'warning',
      content: '请等待所有文件上传完成后再导入',
      duration: 3000
    });
    return;
  }

  isLoading.value = true;
  try {
    let fileNames = '';
    // 收集表单数据
    const field = formFields.value;
    field.forEach((item, index) => {
      const ref:any = componentRefs.value[index];
      if (item.type == 'text') {
        item.value = ref.TextInput;
        if(!ref.TextInput) {
          item.value = ref.TextInput || formData.value[field[Number(index)].name];
        }
      }
      // 处理select组件
      if (item.type == 'select') {
        item.value = ref.select;
        if(!ref.select) {
          item.value = ref.select || formData.value[field[Number(index)].name];
        }
      }
      // 处理number组件
      if (item.type == 'number') {
        item.value = ref.numberInput;
        if(!ref.numberInput) {
          item.value = ref.numberInput || formData.value[field[Number(index)].name];
        }
      }
      // 处理checkbox组件
      if (item.type == 'checkbox') {
        item.value = ref.checkbox;
        if(!ref.checkbox) {
          item.value = ref.checkbox || formData.value[field[Number(index)].name];
        }
      }
      // 处理textarea组件
      if (item.type == 'textarea') {
        item.value = ref.textarea;
        if(!ref.textarea) {
          item.value = ref.textarea || formData.value[field[Number(index)].name];
        }
      }
      if (item.type == 'files') {
        fileNames = ref.fileNames.slice(0, -1);
      }
      if (item.type == 'file') {
        item.value = formData.value[field[Number(index)].name][0].name
      }
    });

    // 添加文件类型校验
    const shouldContinue = await validateFileTypes(fileNames);
    if (!shouldContinue) {
      isLoading.value = false;
      return;
    }

    selectedPlugin.value.params = field;
    // 调用合并分片接口
    try {
      const params = new FormData();
      params.append('pluginInfo', JSON.stringify(selectedPlugin.value));
      params.append('fileNames', fileNames);
      params.append('batchId', useTimestampStore().getTimestamp().toString());
      const res:any = await fileImportApi.mergeChunks(params);
      if (res && res.code === 200) {
        if (res.data == '文件合并成功') {
          emit('success')
        }
        emit('update:visible', false);
      } else {
        messageRef.value?.show({
          type: 'error',
          content: res.msg,
          duration: 3000
        });
      }
    } catch (error: any) {
      console.error('合并分片失败:', error);
      messageRef.value?.show({
        type: 'error',
        content: error.response.data.msg,
        duration: 3000
      });
    } finally {
      isLoading.value = false;
      // 调用接口失败后清除文件上传组件的数据
      formFields.value.forEach((field, index) => {
      if (field.type === 'files' || field.type === 'file') {
        const component = componentRefs.value[index];
        if (component && component.clearAllFiles) {
          component.clearAllFiles();
        }
      }
    });
    }
  } catch (error) {
    console.error('提交表单失败:', error);
    messageRef.value?.show({
      type: 'error',
      content: '提交表单失败',
      duration: 3000
    });
  }
};


// 取消操作
function handleCancel() {
  emit('update:visible', false);
  // 调用接口失败后清除文件上传组件的数据
  formFields.value.forEach((field, index) => {
    if (field.type === 'files' || field.type === 'file') {
      const component = componentRefs.value[index];
      if (component && component.clearAllFiles) {
        component.clearAllFiles();
      }
    }
  });
  // 重置表单
  resetForm();
}

// 重置表单
function resetForm() {
  selectedPlugin.value = {} as Plugin;
  formFields.value = [];
  formData.value = {};
  executionParams.value.executeCommand = '';
}
// 在组件挂载时初始化引用数组
onMounted( () => {
  getPlugins();
  // 初始化组件引用数组
  componentRefs.value = [];

});
const findTargetPlugin = () => {
  // 从plugins中找到目标插件
  const target = plugins.value.find(plugin => plugin.name == 'DataCleanTool-DB');
  if (target) {
    selectedPlugin.value = target;
    handlePluginChange()
  } else {
    console.log('未找到目标插件');
  }
};

// 监听插件选择变化
watch(selectedPlugin, (newValue) => {
  if (newValue?.id) {
    handlePluginChange();
  }
}, { deep: true });
</script>

<style scoped>
@import '../../../src/assets/css/theme.css';
/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1100;
  overflow: hidden !important;
}
/* 自定义模态窗口样式 */
.modal-content {
  border-radius: 0.75rem;
  width: 80%;
  max-width: 800px;
  max-height: 90vh;
  overflow: hidden !important;
  background: var(--se-main-bg-color);
  /* overflow-y: auto; */
  /* z-index: 51; */
  /* position: relative; */
}

.modal-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--modal-divide);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--se-title-bg-color);
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
}
.modal-body {
  padding: 16px 24px;
  overflow-y: auto;
  max-height: calc(90vh - 140px); /* 减去header和footer的高度 */
}
.dark-mode .modal-body {
  background: var(--se-main-bg-color);
}
.dark-mode .label-text{
  color: var(--text-color);
}
.label-text-t1{
  font-size: 12px !important;
}
.dark-mode .label-text-t1 {
  color: var(--text-color);
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--loading-bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.modal-content::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
    background-color: var(--webkit-track-color);
    border-radius: 4px;
}
/* 滚动条滑块 */
.modal-content::-webkit-scrollbar-thumb {
    background-color: var(--webkit-thumb-color);
    border-radius: 4px;
}
/* 滚动条滑块 hover 状态 */
.modal-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--webkit-thumb-hover-color);
}
.modal-content.modal-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 0 0.75rem 0.75rem 0;
}

/* 按钮样式 */
.modal-footer {
  display: flex;
  padding: 10px 16px;
  justify-content: flex-end;
  border-top: 1px solid var(--modal-divide);
  gap: 8px;
}

.dark-mode .modal-footer {
  background: var(--se-main-bg-color);
  border-top:none;
}

/* 导入标题样式 */
.import-title {
  font-size: 16px;
  color: var(--text-color);
  background: var(--text-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dark-mode .import-title {
  color: var(--text-color);
  background: var(--text-color);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.import-btn-cancel {
  height: 36px;
  font-size: 0.875rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.import-btn-primary {
  height: 36px;
  font-size: 0.875rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}

.close-btn {
  background: transparent;
  border: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  color: var(--text-color);
  padding: 0;
  /* transition: color 0.3s; */
}

.close-btn:hover {
  color: var(--global-color-black);
}
.toast {
  position: fixed;
  top: 2rem;
  right: 2rem;
  background-color: #4CAF50;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
  z-index: 9999;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* 下拉框样式 */
:deep(.select) {
  background-color: var(--select-background) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--select-border-color) !important;
}

:deep(.select option) {
  background-color: var(--select-dropdown-bg) !important;
  color: var(--text-color) !important;
}

:deep(.select option:hover ) {
  background-color: var(--text-color) !important;
  color: var(--select-dropdown-bg)  !important;
}

:deep(.select:disabled) {
  background-color: #f1f5f9 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
}
.bg-base-200 {
  background: var(--se-sub-plate-bg-color);
  color: var(--text-color);
}
@media (max-width: 1024px) {
  .modal-content {
    width: 85% !important;
    max-width: 650px !important;
  }

  .modal-header h3 {
    font-size: 14px !important;
  }

  .modal-body {
    padding: 12px 16px !important;
  }

  .label-text {
    font-size: 12px !important;
  }

  .form-control {
    margin-bottom: 12px !important;
  }

  .input {
    font-size: 12px !important;
    padding: 4px 8px !important;
    height: 28px !important;
  }

  .select {
    font-size: 12px !important;
    padding: 4px 8px !important;
    height: 28px !important;
  }

  .text-area {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }

  .checkbox-label {
    font-size: 12px !important;
  }

  .checkbox-container {
    gap: 4px !important;
  }

  .checkbox {
    width: 14px !important;
    height: 14px !important;
  }

  .checkbox::after {
    width: 8px !important;
    height: 8px !important;
  }

  .file-list {
    max-height: 120px !important;
  }

  .file-item {
    padding: 4px 8px !important;
    font-size: 12px !important;
  }

  .file-item button {
    padding: 2px 6px !important;
    font-size: 11px !important;
  }

  .upload-btn {
    font-size: 12px !important;
    padding: 4px 12px !important;
    height: 28px !important;
  }

  .upload-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  .import-btn-cancel, .import-btn-primary {
    height: 28px !important;
    font-size: 12px !important;
    padding: 0 12px !important;
  }

  .close-btn {
    font-size: 18px !important;
  }

  .alert {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .loading {
    width: 20px !important;
    height: 20px !important;
  }

  .loading + span {
    font-size: 12px !important;
  }

  .spinner {
    width: 40px !important;
    height: 40px !important;
    border-width: 4px !important;
  }

  .toast {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  :deep(.select) {
    font-size: 12px !important;
  }

  :deep(.select option) {
    font-size: 12px !important;
  }

  .grid {
    gap: 8px !important;
  }

  .bg-base-200 {
    padding: 12px !important;
  }

  .bg-base-200 h4 {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }

  .gap-\[10px\] {
    gap: 6px !important;
  }

  .flex-none {
    min-width: 70px !important;
  }
}


.input:disabled {
  background-color: var(--disabled-color) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--input-border-color) !important;
}

@media (max-width: 1024px) {
  .modal-content {
    width: 85% !important;
    max-width: 650px !important;
  }

  .modal-header h4 {
    font-size: 14px !important;
  }

  .modal-body {
    font-size: 12px !important;
  }

  .input {
    font-size: 12px !important;
    padding: 4px 8px !important;
    height: 28px !important;
  }

  .btn {
    font-size: 12px !important;
    padding: 4px 12px !important;
    height: 28px !important;
  }

  .checkbox {
    width: 14px !important;
    height: 14px !important;
  }

  .file-list {
    max-height: 200px !important;
  }

  .loading-spinner {
    width: 20px !important;
    height: 20px !important;
  }

  .toast {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  .font-bold {
    font-size: 14px !important;
  }

  .font-bold-t1{
    font-size: 14px !important;
  }
  .text-sm {
    font-size: 11px !important;
  }

  .text-xs {
    font-size: 10px !important;
  }

  .p-4 {
    padding: 0.75rem !important;
  }

  .p-2 {
    padding: 0.5rem !important;
  }

  .gap-2 {
    gap: 0.5rem !important;
  }

  .mt-4 {
    margin-top: 0.75rem !important;
  }

  .mb-2 {
    margin-bottom: 0.5rem !important;
  }

  .mt-1 {
    margin-top: 0.25rem !important;
  }

  .rounded-lg {
    border-radius: 0.375rem !important;
  }
}
.font-bold-t1{
    color: var(--text-color);
}
.font-bold{
    color: var(--text-color);
}
</style>
